<template>
  <div class="storerm">
    <IEcharts
      :loading="loading"
      :option="bar"
      @ready="onReady"
    />
  </div>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .storerm {
    width: 100%;
    height: 200px;
  }
</style>

<script type="text/babel">
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'CommonChart',
    components: {
      IEcharts
    },
    props: [
      'whinformweight',
      'failedweight',
      'materweight',
      'scrapweight',
      'outweight',
      'lossweight',
    ],
    data: () => ({
      loading: true,
      instance: {},
      bar: {
        title: {
          show: false,
          text: ''
        },
        tooltip: {
          show: true,
          alwaysShowContent: false,
          trigger: 'axis',
          formatter: "{a} <br/>{b} : {c} 吨",
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          type: 'scroll',
          show: false,
          data:['领料', '产成品', '次品', '退料', '废品', '生产损耗']
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          data: ['领料', '产成品', '次品', '退料', '废品', '生产损耗']
        },
        yAxis: {},
        series: [{
          name: '',
          type: 'bar',
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3'];
                return colorList[params.dataIndex]
              }
            }
          },
          data: []
        }]
      },
    }),
    watch: {
      'outweight': function () {
        // setTimeout(function () {
        //   instance.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,//第几条series
        //     dataIndex: 0,//第几个tooltip
        //   })
        // })
      }
    },
    created() {
    },
    mounted() {
      this.bar.series[0].data = [this.outweight, this.whinformweight, this.failedweight, this.materweight, this.scrapweight, this.lossweight];
      console.log('vals:', this.bar.series[0].data)
      console.log('xAxis:', this.bar.xAxis.data)
    },
    methods: {
      onReady(instance, ECharts) {
        this.loading = false;
        // this.instance = instance;
        // setTimeout(function () {
        //   instance.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,//第几条series
        //     dataIndex: 0,//第几个tooltip
        //   })
        // })
      }
    }
  };
</script>
